import { Balloon, List, Timeline, Typography } from '@alifd/next';
import React from 'react';
import { DATETIME_TEXT } from '../stores/definitions';

const TimelineItem = Timeline.Item;

const LogTimeline = (props) => {
  const { title, width = '100%', dataSource } = props;
  return (
    <div style={{ width: `${width}`, textAlign: 'center' }}>
      <h2>{title}</h2>
      <Timeline style={{ width: '30%', margin: '0 auto' }}>
        {dataSource.map((logInfo, idx) => {
          const { title: logTitle, ts, id } = logInfo;
          let titleDom = (<p style={{ width: '200px', whiteSpace: 'break-spaces' }}>{logTitle}</p>);
          if (logInfo?.args) {
            const { newData, oldData } = logInfo?.args || {};
            titleDom = (
              <>
                <Balloon
                  v2
                  trigger={<p style={{ width: '200px', whiteSpace: 'break-spaces' }}>{logTitle}</p>}
                  triggerType="hover"
                  width="50%"
                  popupStyle={{ width: '700px', maxWidth: 'none' }}
                  align="l"
                >
                  <div>
                    <CompareBalloon
                      newData={newData}
                      oldData={oldData}
                    />
                  </div>
                </Balloon>
              </>
            );
          }

          return (
            <TimelineItem
              state={idx == 0 ? 'process' : 'done'}
              key={`${id}-${idx}`}
              title={titleDom}
              timeLeft={<p style={{ width: '200px', float: 'right' }}>{DATETIME_TEXT(ts)}</p>}
            />
          );
        })}
      </Timeline>
    </div>
  );
};

const CompareBalloon = (props) => {
  const { newData, oldData } = props;
  return (
    <>
      <div style={{
        display: 'flex',
        flexDirection: 'row',
        height: '80%',
        margin: '0,auto',
        textAlign: 'center',
      }}
      >
        <List
          header={<div style={{ fontSize: '20px' }}>修改前</div>}
          bordered
          dataSource={oldData}
          renderItem={item => <List.Item>{item}</List.Item>}
          style={{ width: '50%', height: '100%' }}
        />
        <List
          header={<div style={{ fontSize: '20px' }}>修改后</div>}
          bordered
          dataSource={newData}
          renderItem={item => (
            <List.Item>
              <Typography.Text mark>{item}</Typography.Text>
            </List.Item>
          )}
          style={{ width: '50%', height: '100%' }}
        />
      </div>
    </>
  );
};

export default LogTimeline;
